<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/10/31
  Time: 16:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>

<html>
<head>
    <meta charset="UTF-8">
    <title>User Review with Star Rating</title>
    <style>
        /* 隐藏默认的单选按钮 */
        input[type="radio"] {
            display: none;
        }

        /* 星星样式 */
        label {
            font-size: 30px;
            color: rgb(128, 128, 128);
            cursor: pointer;
        }

        /* 选中星星时的颜色 */
        input[type="radio"]:checked ~ label {
            color: gold;
        }
    </style>
    <jsp:include page="inc/inc.jsp"></jsp:include>
</head>
<body>
<header id="site-header" class="fixed-top">
    <section class="w3l-header-4">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <h1><a class="navbar-brand" href="${path}/user/index">
                    <span>跑腿平台</span>
                </a></h1>
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                        data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="fa icon-expand fa-bars"></span>
                    <span class="fa icon-close fa-times"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav mx-lg-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/index">首页 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/createTask">发起任务</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link" href="${path}/user/historyOrders">我的订单</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/wallet">钱包</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/myAddress">地址管理</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="${path}/user/myAddress">我的评价</a>
                        </li>
                        <li class="nav-item" onclick="logOut()"><a class="nav-link">退出登录</a> </li>
                    </ul>
                    <ul class="navbar-nav search-right mt-lg-0 mt-2">

                         <li class="nav-item"><a href="${path}/user/updateUserInfo"
                                                class="btn btn-primary btn-style d-none d-lg-block btn-style mr-2"><span
                               class="fa fa-phone mr-3" aria-hidden="true"></span>  ${sessionScope.user.phone_number}</a>
                        </li>
                    </ul>

                    <!-- search popup -->
                    <div id="search" class="pop-overlay">
                        <div class="popup">
                            <form action="#" method="GET" class="d-sm-flex">
                                <input type="search" placeholder="Search.." name="search" required="required"
                                       autofocus>
                                <button type="submit">Search</button>
                                <a class="close" href="#url">&times;</a>
                            </form>
                        </div>
                    </div>
                    <!-- /search popup -->
                </div>
                <!-- toggle switch for light and dark theme -->
                <div class="mobile-position">
                    <nav class="navigation">
                        <div class="theme-switch-wrapper">
                            <label class="theme-switch" for="checkbox">
                                <input type="checkbox" id="checkbox">
                                <div class="mode-container">
                                    <i class="gg-sun"></i>
                                    <i class="gg-moon"></i>
                                </div>
                            </label>
                        </div>
                    </nav>
                </div>
            </nav>
        </div>
    </section>
</header>
<section class="w3l-about-breadcrumb text-left">
    <div class="breadcrumb-bg breadcrumb-bg-about py-3">
        <div class="container grid-breadcrumb">
            <ul class="breadcrumbs-custom-path mt-md-2">
                <li><a href="${path}/user/index">主页</a></li>
                <li class="active"><span class="fa fa-angle-double-right mx-2" aria-hidden="true"></span>
                    <a href="${path}/user/completedOrderList">已完成订单</a>
                </li>
                <li class="active"><span class="fa fa-angle-double-right mx-2" aria-hidden="true"></span>
                评价</li>
            </ul>
        </div>
    </div>
</section>
<div class="form-41-mian mt-5 pt-lg-5 pt-md-4">
    <div class="container">
        <h3 class="hny-title text-center mb-md-5 mb-4" style="margin: 0 ; padding: 0;">评价</h3>
    </div>
</div>
<div class="container" style="height: 800px;">
<form action="${path}/user/reviews" method="post">
    <div>
        <input type="hidden" name="taskId" value="${requestScope.taskId}">
        <input type="radio" id="star1" name="" value="5" />
        <label for="star5">★</label>
        <input type="radio" id="star2" name="" value="4" />
        <label for="star4">★</label>
        <input type="radio" id="star3" name="" value="3" />
        <label for="star3">★</label>
        <input type="radio" id="star4" name="" value="2" />
        <label for="star2">★</label>
        <input type="radio" id="star5" name="" value="1" />
        <label for="star1">★</label>
    </div>
    <label for="comment">评论:</label><br>
    <textarea id="comment" name="comment" rows="4" cols="50"></textarea><br>
    <input type="submit" value="提交评论">
</form>
</div>
<jsp:include page="inc/footer.jsp"></jsp:include>
<script>
    $(function (){
        $("#star1").click(star1);
        $("#star2").click(star2);
        $("#star3").click(star3);
        $("#star4").click(star4);
        $("#star5").click(star5);
    })
    function star1(){
        $("#star1").attr("name","score");
        $("#star2").attr("name","");
        $("#star3").attr("name","");
        $("#star4").attr("name","");
        $("#star5").attr("name","");
    }
    function star2(){
        $("#star1").attr("name","");
        $("#star2").attr("name","score");
        $("#star3").attr("name","");
        $("#star4").attr("name","");
        $("#star5").attr("name","");
    }
    function star3(){
        $("#star1").attr("name","");
        $("#star2").attr("name","");
        $("#star3").attr("name","score");
        $("#star4").attr("name","");
        $("#star5").attr("name","");
    }
    function star4(){
        $("#star1").attr("name","");
        $("#star2").attr("name","");
        $("#star3").attr("name","");
        $("#star4").attr("name","score");
        $("#star5").attr("name","");
    }
    function star5(){
        $("#star1").attr("name","");
        $("#star2").attr("name","");
        $("#star3").attr("name","");
        $("#star4").attr("name","");
        $("#star5").attr("name","score");
    }
</script>
</body>
</html>
